import * as echarts from '../component/ec-canvas/echarts';
import { get } from '../../../utils/request';

var option = {
  grid: {
    containLabel: true,
    borderColor: '#F6E7D7',
    backgroundColor: '#F6E7D7'
  },
  tooltip: {
    show: true,
    trigger: 'axis'
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: [],
  },
  yAxis: {
    x: 'center',
    type: 'value',
    min: 0,
    max: 100,
    interval: 20,
    splitLine: {
      lineStyle: {
        type: 'dashed',
        color: '#B3E0FF',
      }
    }
  },
  series: [{
    type: 'line',
    lineStyle: {
      color: '#79C78D'
    },
    itemStyle: {
      color: '#4DB367'
    },
    data: []
  }]
};

var chart = null;

function initChart(canvas, width, height, dpr) {
  chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr // 像素比
  });
  canvas.setChart(chart);
  chart.setOption(option);
  return chart;
}
Page({

  /**
   * 页面的初始数据
   */
  data: {
    allAnalysisData: {},
    dateActiveIndex: 0,
    typeActiveIndex: 0,
    months: [],
    years: [],
    ec: {
      onInit: initChart
    },
    typeValue: "累计总存款",
    dateValue: "月",
    buttons: ["累计总存款", "累计总利息"],
    buttonsYear: ["月", "年"],
    dataAnalysis: null,
    bankAccountId: null

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  },
  onChangeHead({ detail: { activeCard:
    { bankAccount: { id } } } }) {
    this.setData({
      bankAccountId: id,
      typeActiveIndex: 0,
      dateActiveIndex: 0,
      dataAnalysis: null
    })

    this.freshData('累计总存款', '月');
  },
  onChangeTypeButton({ detail }) {
    this.setData({
      typeValue: detail
    })
    this.freshData(detail, this.data.dateValue)
  },
  onChangeDateButton({ detail }) {
    this.setData({
      dateValue: detail
    })

    this.freshData(this.data.typeValue, detail)
  },
  freshData(type, date) {
    const accountId = this.data.bankAccountId;
    const allAccountData = this.data.allAnalysisData[accountId];

    if (allAccountData == null) {
      get(`bankstatement/dataAnalysis/${accountId}`, null, (data) => {
        this.data.allAnalysisData[accountId] = data
        this.setData({
          dataAnalysis: data,
          allAnalysisData: this.data.allAnalysisData
        })
        this.updateDetailSeriesData('累计总存款', '月')
        chart.setOption(option);
      })
    } else {
      this.setData({
        dataAnalysis: allAccountData
      })
      this.updateDetailSeriesData(type, date)
      chart.setOption(option);
    }
  },
  updateDetailSeriesData(type, date) {
    let businessType = '';
    let dateType = '';

    if (date == undefined || date == '月') {
      dateType = 'month'
    } else if (date == '年') {
      dateType = 'year'
    }

    if (type == undefined || type == "累计总存款") {
      businessType = "totalIncome"
    } else if (type == "累计总利息") {
      businessType = "totalInterest"
    } else if (type == "支出") {
      businessType = "totalMoneyOut"
    }

    const targetData = this.data.dataAnalysis[dateType][businessType]
    option.series[0].data = targetData.data;
    option.yAxis.max = targetData.max;
    option.yAxis.min = targetData.min;
    option.yAxis.interval = targetData.interval;
    if (dateType == 'year') {
      option.xAxis.data = this.data.dataAnalysis.yearData;
    } else {
      option.xAxis.data = this.data.dataAnalysis.monthData;
    }
  }


})

